import { PageHeader, Tabs, Statistic, Descriptions, Card, Row, Col, Table, Typography } from 'antd';
import React, { Component } from 'react';
import { Inquirydetail } from '../../../services/auth';

const { Text } = Typography;
const { TabPane } = Tabs;
const Content = ({ children, extra }) => (
	<div className="content">
		<div className="main">{children}</div>
		<div className="extra">{extra}</div>
	</div>
);

const columns = [
	{
		title: '产品编号',
		dataIndex: 'goods_id',
		key: 'goods_id',
		align: 'center'
	},
	{
		title: '产品名称',
		dataIndex: 'goods_name',
		key: 'goods_name',
		align: 'center'
	},
	{
		title: '订货数量',
		dataIndex: 'quantity',
		key: 'quantity',
		align: 'center'
	},
	{
		title: '产品定价（件/元）',
		dataIndex: 'price',
		key: 'price',
		align: 'center'
	},
	{
		title: '订单转化率',
		dataIndex: 'trans_rate',
		key: 'trans_rate',
		align: 'center'
	},
	{
		title: '产品期望价格（件/元）',
		dataIndex: 'expectprice',
		key: 'expectprice',
		align: 'center'
	}
];

export default class InquiryDetail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			data: {}, //询价单整体
			dataSource: [] //商品列表
		};
	}
	componentWillMount() {
		const { value } = this.props;
		Inquirydetail(value.id).then(
			(response) => {
				console.log(response.data); ////查看后台数据
				this.setState({
					data: response.data,
					dataSource: response.data.goods
				});
			},
			(error) => {
				console.log('失败了', error);
			}
		);
	}
	render() {
		const { data, dataSource } = this.state;
		return (
			<PageHeader
				className="site-page-header-responsive"
				title={`编号：${data.id}`}
				footer={
					<Tabs defaultActiveKey="1">
						<TabPane tab="详情展示" key="1">
							<Card bordered={false}>
								<Table
									dataSource={dataSource}
									columns={columns}
									pagination={false}
									size="small"
									rowKey={(record) => record.goods_id}
									bordered
									summary={(pageData) => {
										let totalQuatity = 0;
										let totalPrice = 0;
										let totalExpectprice = 0;

										pageData.forEach(({ quantity, price, expectprice }) => {
											totalQuatity += quantity * 1;
											totalPrice += quantity * price;
											totalExpectprice += quantity * expectprice;
										});
										return (
											<Table.Summary.Row>
												<Table.Summary.Cell align="center">合计</Table.Summary.Cell>
												<Table.Summary.Cell />
												<Table.Summary.Cell align="center">
													<Text>{totalQuatity}</Text>
												</Table.Summary.Cell>
												<Table.Summary.Cell align="center">
													<Text>{totalPrice}</Text>
												</Table.Summary.Cell>
												<Table.Summary.Cell />
												<Table.Summary.Cell align="center">
													<Text>{totalExpectprice}</Text>
												</Table.Summary.Cell>
											</Table.Summary.Row>
										);
									}}
								/>
							</Card>
						</TabPane>
					</Tabs>
				}
			>
				<Content
					extra={
						<div>
							<br />
							<Card bordered={false} bodyStyle={{paddingLeft:"0px"}}>
								<Row gutter={16}>
									<Col span={3}>
										<Statistic title="状态" value={data.status} />
									</Col>
									<Col span={5}>
										<Statistic
											title="期望总价"
											value={data.totalExpectprice}
											prefix="￥"
											valueStyle={{ color: "#cf1322" }}
										/>
									</Col>
								</Row>
							</Card>
						</div>
					}
				>
					<Descriptions size="default" column={2} bordered>
						<Descriptions.Item label="公司编号" contentStyle={{fontWeight:"bold"}}>{data.company_id}</Descriptions.Item>
						<Descriptions.Item label="公司名称" contentStyle={{fontWeight:"bold"}}>{data.company_name}</Descriptions.Item>
						<Descriptions.Item label="操作员编号" contentStyle={{fontWeight:"bold"}}>{data.agent_id}</Descriptions.Item>
						<Descriptions.Item label="操作员名称" contentStyle={{fontWeight:"bold"}}>{data.agent_name}</Descriptions.Item>
						<Descriptions.Item label="询价日期" contentStyle={{fontWeight:"bold"}}>{data.valid_from}</Descriptions.Item>
						<Descriptions.Item label="询价有效期至" contentStyle={{fontWeight:"bold"}}>{data.valid_to}</Descriptions.Item>
						<Descriptions.Item label="预计送达日期" contentStyle={{fontWeight:"bold"}}>{data.req_deliv_date}</Descriptions.Item>
						<Descriptions.Item label="预计送货地点" contentStyle={{fontWeight:"bold"}}>{data.ship_to_address}</Descriptions.Item>
					</Descriptions>
				</Content>
			</PageHeader>
		);
	}
}
